<template>
  <div class="warp">
    <div class="hypotenuse">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="container">
      <div class="head">
        <div class="head-icons">
          <img class="user-photo" src="../assets/jjzyx6.png" />
          <img class="user-photo-smart" src="../assets/jjzyx6.png" />
        </div>
        <div class="user-info">
          <h4 class="nickname">{{ user.username }}</h4>
          <p class="idno">ID:1069643013</p>
        </div>
        <ul class="user-card">
          <li>
            <span class="title">红包</span>
            <span class="number">218</span>
          </li>
          <li>
            <span class="title">优惠价</span>
            <span class="number">218</span>
          </li>
          <li>
            <span class="title">鲜豆</span>
            <span class="number">218</span>
          </li>
          <li>
            <span class="title">白条</span>
            <span class="number">218</span>
          </li>
        </ul>
      </div>
      <ul class="menu">
        <li class="menu-item">
          <span>我的钱包</span><span class="iconfont">></span>
        </li>
        <li class="menu-item" @click="ToAddress">
          <span>我的地址</span><span class="iconfont">></span>
        </li>
        <li class="menu-item">
          <span>客服与帮助</span><span class="iconfont">></span>
        </li>
        <li class="menu-item" @click="LoginOut">
          <span>注销登陆</span><span class="iconfont">></span>
        </li>
      </ul>
    </div>
    <docker></docker>
  </div>
</template>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}

.warp {
  .hypotenuse {
    width: 100%;
    background-image: linear-gradient(239deg, #3a6ff3 0%, #50c7fb 100%);
    position: absolute;
    height: 250px;
    .left {
      position: absolute;
      bottom: 0px;
      float: left;
      width: 0px;
      height: 0px;
      border-color: white transparent;
      border-width: 0 350px 100px 0;
      border-style: solid;
    }
    .right {
      position: absolute;
      bottom: 0px;
      width: 0px;
      height: 0px;
      border-color: white transparent;
      border-width: 0px 0px 100px 350px;
      border-style: solid;
    }
  }
  .container {
    height: 223.5px;
    z-index: 999px;
    padding: 48px 18px 0 18px;
    .head {
      margin-top: 77px;
      padding-top: 47px;
      background: #ffffff;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      border-radius: 8px;

      height: 203px;
      margin-top: 50px;

      position: relative;
      .head-icons {
        position: absolute;
        width: 100%;
        top: -47px;
        .user-photo {
          width: 94px;
          height: 94px;
          border-radius: 50%;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
        }
        .user-photo-smart {
          width: 24px;
          height: 20px;
          position: absolute;
          right: 0;
        }
      }

      .user-info {
        margin-top: 12px;
        border-bottom: 1px solid #ccc;
        .nickname {
          font-family: PingFangSC-Regular;
          font-size: 24px;
          color: #262628;
          letter-spacing: 0.19px;
          text-align: center;
          line-height: 36px;
        }
        .idno {
          margin-top: 2px;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #c1c0c9;
          text-align: center;
          margin-bottom: 12px;
        }
      }
      .user-card {
        padding-top: 12px;
        display: flex;
        li {
          flex: 25%;
          display: flex;
          flex-direction: column;
          .title {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #c1c0c9;
            text-align: center;
            margin-bottom: 5px;
          }
          .number {
            font-family: PingFangSC-Regular;
            font-size: 20px;
            color: #262628;
            text-align: center;
          }
        }
      }
    }
    .menu {
      padding: 0 16px 0 21px;
      margin-top: 16px;

      background: #ffffff;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      .menu-item {
        display: flex;
        justify-content: space-between;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #262626;
        height: 48px;
        line-height: 48px;
      }
    }
  }
}
</style>
<script>
import Docker from "../components/Docker.vue";

export default {
  created() {
    this.user = this.$store.state.user.currUserInfo;
  },
  data() {
    return {
      user: {},
    };
  },
  name: "My",
  components: { Docker },
  methods: {
    LoginOut(){
     
      this.$store.commit("user/UpdateLoginStatus", {
        isLogin: false,
      });
      this.$router.push({ name: "Home" });
    },
    ToAddress() {
      this.$router.push({
        path: "/Address",
        query: {
          isEdit: 1,
        },
      });
    },
  },
};
</script>